
<template>
    <el-card class="m-8">
      <section slot="header" class="mb-4">
        <div class="checkedBox flex items-center mb-4">
            <span>爵位名称：</span>
            <el-input v-model="listQuery.name" placeholder="请输入" size="normal" clearable></el-input>
            <span style="text-align: right;">更新时间：</span>
            <el-date-picker
                v-model="listQuery.start_time"
                class="marginRB10"
                clearable
                placeholder="开始时间"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
            <el-date-picker
                v-model="listQuery.end_time"
                class="mr-4 ml-4"
                clearable
                placeholder="结束时间"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
            
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button type="primary" @click="handleReset">重置</el-button>
        </div>
        <div>
          <el-button class="mr-4" type="primary" @click="handleAdd">新增</el-button>
          <el-button type="danger" @click="handleEditAll">批量编辑</el-button>
        </div>
      </section>
  
      <el-table :data="tableList" border class="mt-4" stripe @selection-change="handleSelectionChange">
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="序号" prop="id"/>
        <el-table-column label="爵位名称" prop="name"></el-table-column>
        <el-table-column label="爵位图片" prop="icon">
          <template slot-scope="scoped">
            <el-popover max-width="420" placement="right" trigger="hover">
              <img :lazy="true" :src="scoped.row.icon" class="imageStyle" fit="fill" />
              <img
                slot="reference"
                :src="scoped.row.icon"
                alt=""
                style="width: 80px"
              />
            </el-popover>
            
          </template>
        </el-table-column>
        <el-table-column label="开通条件" prop="upgrade_type_txt"></el-table-column>
        <el-table-column label="续费条件" prop="keep_type_txt"></el-table-column>
        <el-table-column label="有效期（天）" prop="expired_day"></el-table-column>
        <el-table-column label="排序" prop="sort"></el-table-column>
        <el-table-column label="特权" prop="privilege" width="450px">
            <template slot-scope="{ row }">
            <div class="privilege">
                <el-tag v-for="item in row.privilege" :key="item.id" class="mb-2">{{ item.name }}</el-tag>
            </div>
            </template>
        </el-table-column>
        <el-table-column label="更新时间" prop="updated_at"/>
  
        <el-table-column label="操作" width="300">
          <template slot-scope="{row}">
            <el-button type="primary" @click="handleEdit(row)">编辑</el-button>
            <el-button type="danger" @click="handlePrivilegeLevel(row)">特权等级</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <cus-pagination
        :limit.sync="listQuery.perPage"
        :page.sync="listQuery.page"
        :total="total"
        @pagination="initData"
      />
  
      <el-dialog
        :title="isEdit?'编辑':'新增'"
        :visible.sync="addDialog2"
        lock-scroll
        width="30%"
        @close="closeAddDialog2"
      >
        <el-form ref="form" :inline="false" :model="formData" :rules="rules" label-width="150px" size="normal">
            <el-form-item label="爵位名称" prop="name">
                <el-input v-model="formData.name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="爵位图片" prop="icon"  class="formWidth">
                <div class="awardBox">
                    <div class="awardInfo" :class="{'hide_box': formData.icon, 'show_box': !formData.icon}">
                        <img v-if="formData.icon" :src="formData.icon" class="avatar" />
                        <el-upload
                            v-else
                            ref="upload"
                            :auto-upload="true"
                            :http-request="customizeUpload"
                            :on-success="handlePictureSuccess1"
                            action=""
                            class="upload-demo"
                            :limit="1"
                            list-type="picture-card"
                        >
                            <i slot="default" class="el-icon-plus"></i>
                        </el-upload>
                        <span class="closeIcon" @click="handlePictureRemove1"><i class="el-icon-delete"></i></span>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="爵位效果图" prop="special" class="formWidth">
                <div class="awardBox">
                    <div class="awardInfo" :class="{'hide_box': formData.special, 'show_box': !formData.special}">
                        <video
                            v-if="/.mp4$/.test(formData.special)"
                            :src="formData.special"
                            autoplay 
                            controls
                            muted
                            style="max-width:200px"
                        ></video>
                        <img v-else-if="formData.special" :src="formData.special" class="avatar" />
                        <el-upload
                            v-else
                            ref="upload"
                            :auto-upload="true"
                            :http-request="customizeUpload"
                            :on-success="handlePictureSuccess2"
                            action=""
                            class="upload-demo"
                            :limit="1"
                            list-type="picture-card"
                        >
                            <i slot="default" class="el-icon-plus"></i>
                        </el-upload>
                        <span class="closeIcon" @click="handlePictureRemove2"><i class="el-icon-delete"></i></span>
                    </div>
                </div>
            </el-form-item>


            <el-form-item label="爵位特权" prop="privilege_ids">
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="formData.privilege_ids" @change="handleCheckedCitiesChange">
                    <el-checkbox v-for="privilege in privilegeS" :label="privilege.id" :key="privilege.id">{{privilege.name}}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>


            <el-form-item label="专属铭牌" prop="nameplate">
                <div class="awardBox">
                    <div class="awardInfo" :class="{'hide_box': formData.nameplate, 'show_box': !formData.nameplate}">
                        <img v-if="formData.nameplate" :src="formData.nameplate" class="avatar" />
                        <el-upload
                            v-else
                            ref="upload"
                            :auto-upload="true"
                            :http-request="customizeUpload"
                            :on-success="handlePictureSuccess3"
                            action=""
                            class="upload-demo"
                            :limit="1"
                            list-type="picture-card"
                        >
                            <i slot="default" class="el-icon-plus"></i>
                        </el-upload>
                        <span class="closeIcon" @click="handlePictureRemove3"><i class="el-icon-delete"></i></span>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="专属主页飘" prop="homepage_icon" class="formWidth">
                <div class="awardBox">
                    <div class="awardInfo" :class="{'hide_box': formData.homepage_icon, 'show_box': !formData.homepage_icon}">
                        <video
                            v-if="/.mp4$/.test(formData.homepage_icon)"
                            :src="formData.homepage_icon"
                            autoplay 
                            controls
                            muted
                            style="max-width:200px"
                        ></video>
                        <img v-else-if="formData.homepage_icon" :src="formData.homepage_icon" class="avatar" />
                        
                        <el-upload
                            v-else
                            ref="upload"
                            :auto-upload="true"
                            :http-request="customizeUpload"
                            :on-success="handlePictureSuccess4"
                            action=""
                            class="upload-demo"
                            :limit="1"
                            list-type="picture-card"
                        >
                            <i slot="default" class="el-icon-plus"></i>
                        </el-upload>
                        <span class="closeIcon" @click="handlePictureRemove4"><i class="el-icon-delete"></i></span>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="专属主页飘效果图" prop="homepage_special" class="formWidth">
                <div class="awardBox">
                    <div class="awardInfo" :class="{'hide_box': formData.homepage_special, 'show_box': !formData.homepage_special}">
                        <video
                            v-if="/.mp4$/.test(formData.homepage_special)"
                            :src="formData.homepage_special"
                            autoplay 
                            controls
                            muted
                            style="max-width:200px"
                        ></video>
                        <img v-else-if="formData.homepage_special" :src="formData.homepage_special" class="avatar" />
                        <el-upload
                            v-else
                            ref="upload"
                            :auto-upload="true"
                            :http-request="customizeUpload"
                            :on-success="handlePictureSuccess5"
                            action=""
                            class="upload-demo"
                            :limit="1"
                            list-type="picture-card"
                        >
                            <i slot="default" class="el-icon-plus"></i>
                        </el-upload>
                        <span class="closeIcon" @click="handlePictureRemove5"><i class="el-icon-delete"></i></span>
                    </div>
                </div>
            </el-form-item>

            <el-form-item v-if="formData.privilege_ids.includes(5)" label="麦位昵称颜色" prop="seat_color_id">
                <el-select v-model="formData.seat_color_id" >
                    <el-option
                      v-for="item in options2"
                      :key="item.id"
                      :label="item.product_name"
                      :value="item.id"
                      placeholder="请选择"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="formData.privilege_ids.includes(4)" label="专属声波" prop="acoustic_wave_id">
                <el-select v-model="formData.acoustic_wave_id" >
                    <el-option
                      v-for="item in options3"
                      :key="item.id"
                      :label="item.product_name"
                      :value="item.id"
                      placeholder="请选择"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <!-- <el-form-item v-if="formData.privilege_ids.includes(7)" label="专属公屏气泡" prop="public_screen_id">
                <el-select v-model="formData.public_screen_id" >
                    <el-option
                      v-for="item in options4"
                      :key="item.id"
                      :label="item.product_name"
                      :value="item.id"
                      placeholder="请选择"
                    >
                    </el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item v-if="formData.privilege_ids.includes(11)" label="专属座驾" prop="car_id">
                <el-select v-model="formData.car_id" >
                    <el-option
                      v-for="item in options5"
                      :key="item.id"
                      :label="item.product_name"
                      :value="item.id"
                      placeholder="请选择"
                    >
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="开通条件" prop="upgrade_need_coin">
                <el-select v-model="formData.upgrade_type" >
                    <el-option
                      v-for="item in options1"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      placeholder="请选择"
                    >
                    </el-option>
                </el-select>
                <el-select v-model="formData.upgrade_need_day" >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      placeholder="请选择"
                    >
                    </el-option>
                </el-select>
                <el-input type="number" v-model.number="formData.upgrade_need_coin" @input="handleInput5">
                    <template slot="append">M豆</template>
                </el-input>
            </el-form-item>
            <el-form-item label="续费条件" prop="keep_need_coin">
                <el-select v-model="formData.keep_type" >
                    <el-option
                      v-for="item in options1"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      placeholder="请选择"
                    >
                    </el-option>
                </el-select>
                <el-input type="number" v-model.number="formData.keep_need_coin" @input="handleInput3">
                    <template slot="append">M豆</template>
                </el-input>
            </el-form-item>
            <el-form-item label="有效期" prop="expired_day">
                <el-input type="number" v-model.number="formData.expired_day" @input="handleInput1">
                    <template slot="append">天</template>
                </el-input>
            </el-form-item>
            <el-form-item type="number" label="排序" prop="sort">
                <el-input type="number" v-model.number="formData.sort" @input="handleInput2"></el-input>
            </el-form-item>
          
        </el-form>
  
        <section slot="footer">
          <el-button @click="addDialog2 = false">取消</el-button>
          <el-button type="primary" @click="onSubmit()">确定</el-button>
        </section>
      </el-dialog>
  
      <el-dialog
        :visible.sync="editAllDialogVisible"
        title="批量编辑"
        width="30%"
      >
        <p class="mb-4">提示：您已选择 {{ this.titleList.toString() }} 等......多条数据</p>
        <div class="flex items-center mb-4" style="text-wrap: nowrap;">
            <p class="leftText"><span style="color: red">*</span>续费条件</p>
            <el-select v-model="keep_type" class="mr-4">
                <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    placeholder="请选择"
                >
                </el-option>
            </el-select>
            <el-input type="number" v-model.number="keep_need_coin">
                <template slot="append">M豆</template>
            </el-input>
        </div>
        <div class="flex items-center" style="text-wrap: nowrap;">
            <p class="leftText"><span style="color: red">*</span>有效期</p>
            <el-input v-model.number="expired_day" @input="handleInput4">
                <template slot="append">天</template>
            </el-input>
        </div>
  
        <span slot="footer" class="dialog-footer">
              <el-button @click="editAllDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="confirmEditAll">确 定</el-button>
          </span>
      </el-dialog>

      <!-- 特权等级 -->
      <el-dialog
        :visible.sync="privilegeLevelVisible"
        title="特权等级设置"
        width="30%"
      >
        <div class="flex mb-4" style="text-wrap: nowrap;">
            <p>选择特权：</p>
            <el-select v-model="privilege_ids" multiple placeholder="请选择">
                <el-option
                v-for="item in privilegeList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                </el-option>
            </el-select>
        </div>
  
        <span slot="footer" class="dialog-footer">
              <el-button @click="editAllDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="confirmEditHigh">确 定</el-button>
          </span>
      </el-dialog>
    </el-card>
  
  
</template>
  
<script>
    import { 
        adminRoyalList,
        royalLevelSave,
        adminPrivilegeList,
        royalLevelEditMore,
        royalLevelEditHigh
    } from '@/api/nobilityManagement'
    import { getData } from '@/api/personalizedMall/commodity'
  
    export default {
        data() {
            return {
                privilegeLevelVisible: false,
                privilegeList: [],
                rowId: undefined,
                privilege_ids: [],
                keep_type: undefined,
                keep_need_coin: undefined,
                expired_day: undefined,
                loading2: false,
                radio1: 1,
                privilegeS: [],
                options: [
                    {
                        value: 7,
                        label: '7日'
                    },
                    {
                        value: 30,
                        label: '30日'
                    },
                ],
                options1: [
                    {
                        value: 0,
                        label: '累计消费'
                    },
                    {
                        value: 1,
                        label: '累计充值'
                    },
                ],
                checkAll: false,
                isIndeterminate: false,
                options2: [],
                options3: [],
                options4: [],
                options5: [],
                selectData: '',
                menuList: [],
                tableList: [],
                user_code: '',
                nickname: '',
                dateList: undefined,
                listQuery: {
                    page: 1,
                    perPage: 10,
                    start_time: undefined,
                    end_time: undefined,
                    name: undefined
                },
                meta: {
                    page: 1,
                    perPage: 10
                },
                total: 0,
                /* 弹出框开关 */
                addDialog: false,
                addDialog2: false,
        
                rejectLoading: false,
                passLoading: false,
                id: '',
                // 拒绝原因
                reject_reason: '',
                formData: {
                    id: undefined,
                    name: undefined,
                    icon: undefined,
                    special: undefined, //效果图
                    numnameplateber: undefined, //专属铭牌
                    homepage_icon: undefined, //专属主页飘
                    homepage_special: undefined, //专属主页飘效果图
                    expired_day: undefined, //有效天数
                    upgrade_type: 0, //升级方式 0:累计消费 1:累计充值
                    upgrade_need_day: 7, //升级条件天数
                    upgrade_need_coin: undefined, //升级条件M豆
                    upgrade_expired_day: undefined, //升级有效期
                    keep_type: 0, //保级方式有效期内:0累计消费 1:累计充值
                    keep_need_coin: undefined, //有效期内M豆
                    sort: undefined, //
                    product_ids: [], //product_ids
                    privilege_ids: [], //特权ids
                    seat_color_id: undefined,
                    acoustic_wave_id: undefined,
                    // public_screen_id: undefined,
                    car_id: undefined
                },
                rules: {
                    name: [{ required: true, message: '请输入', trigger: 'blur' }],
                    icon: [{ required: true, message: '请上传', trigger: 'blur' }],
                    special: [{ required: true, message: '请上传', trigger: 'blur' }],
                    numnameplateber: [{ required: true, message: '请上传', trigger: 'blur' }],
                    nameplate: [{ required: true, message: '请上传', trigger: 'blur' }],
                    homepage_icon: [{ required: true, message: '请上传', trigger: 'blur' }],
                    homepage_special: [{ required: true, message: '请上传', trigger: 'blur' }],
                    expired_day: [{ required: true, message: '请输入', trigger: 'blur' }],
                    upgrade_type: [{ required: true, message: '请选择', trigger: 'blur' }],
                    upgrade_need_day: [{ required: true, message: '请输入', trigger: 'blur' }],
                    upgrade_need_coin: [{ required: true, message: '请输入', trigger: 'blur' }],
                    upgrade_expired_day: [{ required: true, message: '请输入', trigger: 'blur' }],
                    keep_type: [{ required: true, message: '请选择', trigger: 'blur' }],
                    keep_need_coin: [{ required: true, message: '请输入', trigger: 'blur' }],
                    privilege_ids: [{ required: true, message: '请选择', trigger: 'blur' }],
                    seat_color_id: [{ required: true, message: '请选择', trigger: 'blur' }],
                    acoustic_wave_id: [{ required: true, message: '请选择', trigger: 'blur' }],
                    // public_screen_id: [{ required: true, message: '请选择', trigger: 'blur' }],
                    car_id: [{ required: true, message: '请选择', trigger: 'blur' }],
                },
                multipleSelection: [],
                dataIds: '',
                number: '',
                editAllDialogVisible: false,
                isEdit: false,
                titleList: [],
                query: undefined
            }
        },
        created() {
            this.getAdminPrivilegeList()
            this.initData()
            this.handleGetData(33)
            this.handleGetData(25)
            this.handleGetData(24)
            this.handleGetData(2)
        },
        methods: {
            handleGetData(param) {
                getData({
                    page: 1,
                    page_size: 1000,
                    style_id: 0,
                    cate_id: param
                }).then(res => {
                    if(param == 33) {

                        this.options2 = res.data.data
                    }
                    if(param == 25) {

                        this.options3 = res.data.data
                    }
                    if(param == 24) {

                        this.options4 = res.data.data
                    }
                    if(param == 2) {

                        this.options5 = res.data.data
                    }
                })
            },
            async initData() {
                try {
                    for (let key in this.listQuery) {
                        this.listQuery[key] = !this.listQuery[key] ? undefined : this.listQuery[key]
                    }
                    const { data } = await adminRoyalList(this.listQuery)
                    this.total = data.total
                    data.data.map(item => {
                        item.privilege_ids = []
                        item.privilege.map(ites => {
                            item.privilege_ids.push(ites.id)
                        })
                    })
                    this.tableList = data.data
                
                } catch (e) {
                    console.error(e)
                }
            },
            handleSearch() {
                this.listQuery.page = 1
                this.initData()
            },
            handleReset() {
                this.listQuery = {
                    page: 1,
                    perPage: 10,
                    start_time: undefined,
                    end_time: undefined,
                    name: undefined
                }
                this.initData()
            },
            async getAdminPrivilegeList() {
                const { data } = await adminPrivilegeList()
                this.privilegeS = data
            },
            handleCheckAllChange(val) {
                console.log(val)
                if(!val) {
                    this.formData.seat_color_id = undefined
                    this.formData.acoustic_wave_id = undefined
                    this.formData.public_screen_id =undefined
                    this.formData.car_id = undefined
                }
                let arr = []
                this.privilegeS.map(item => {
                    arr.push(item.id)
                })
                this.formData.privilege_ids = val ? arr : [];
                this.isIndeterminate = false;
            },
            handleCheckedCitiesChange(value) {
                console.log(value)
                console.log(value.includes(5)) //麦位昵称
                // 专属声波 4
                // 专属公屏气泡 7
                // 专属座驾 11
                if(!value.includes(5)) {
                    this.formData.seat_color_id = undefined
                }
                if(!value.includes(4)) {
                    this.formData.acoustic_wave_id = undefined
                }
                if(!value.includes(7)) {
                    this.formData.public_screen_id =undefined
                }
                if(!value.includes(11)) {
                    this.formData.car_id = undefined
                }
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.privilegeS.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.privilegeS.length
                // console.log(this.formData.privilege_ids)
            },
            confirmEditAll() {
                // keep_type: undefined,
                // keep_need_coin: undefined,
                // expired_day: undefined,
                console.log(this.keep_type, this.keep_need_coin, this.expired_day)
                if (this.keep_type === 0 || this.keep_type === 1) {
                    
                }else {
                    this.$message({
                        message: '请选择续费条件',
                        type: 'warning'
                    })
                    return false
                }
                if(!this.keep_need_coin) {
                    this.$message({
                        message: '请输入续费需要的M豆',
                        type: 'warning'
                    })
                }else if(!this.expired_day) {
                    this.$message({
                        message: '请输入有效期',
                        type: 'warning'
                    })
                }else {

                    royalLevelEditMore({
                        ids: this.dataIds.toString(),
                        keep_type: this.keep_type,
                        keep_need_coin: this.keep_need_coin,
                        expired_day: this.expired_day,
                    }).then(res => {
                        if (res.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '操作成功'
                            })
                            }
                            this.editAllDialogVisible = false
                            this.initData()
                    })
                }
            },
            // 勾选
            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            // 点击批量删除
            handleEditAll() {
                if (this.multipleSelection.length < 2) {
                this.$message({
                    message: '请选择2条或2条以上的内容',
                    type: 'warning'
                })
                return
                } else {
                
                let ids = []
                this.titleList = []
                for (let key in this.multipleSelection) {
                    if(key < 3) {
                    this.titleList.push(this.multipleSelection[key].name)
                    }
                    // ids += `${this.multipleSelection[key].id},`
                    ids.push(this.multipleSelection[key].id)
                }
                // ids = ids.substring(0, ids.length - 1)
                this.dataIds = ids
                }
                this.editAllDialogVisible = true
            },
            handleEdit(row) {
                this.formData = JSON.parse(JSON.stringify(row))
                
                if(!this.formData.seat_color_id) {
                    this.formData.seat_color_id = undefined
                }
                if(!this.formData.acoustic_wave_id) {
                    this.formData.acoustic_wave_id = undefined
                }
                // if(!this.formData.public_screen_id) {
                //     this.formData.public_screen_id = undefined
                // }
                
                if(!this.formData.car_id) {
                    this.formData.car_id = undefined
                }
                this.isEdit = true
                this.addDialog2 = true
                
            },
            handleAdd() {
                this.isEdit = false
                this.addDialog2 = true
            },
            handlePrivilegeLevel(row) {
                if(row.high.length) {
                    row.high.map(item => {

                        this.privilege_ids.push(item.id)
                    })
                }else {
                    this.privilege_ids = []
                }
                this.privilegeList = row.privilege
                this.rowId = row.id
                this.privilegeLevelVisible = true
            },
            confirmEditHigh() {
                const ids = this.privilege_ids.toString()
                royalLevelEditHigh({
                    id: this.rowId,
                    privilege_ids: ids
                }).then(res => {
                    if(res.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '操作成功'
                        })
                        this.privilegeLevelVisible = false
                        this.initData()
                        this.privilege_ids = []
                        this.rowId = undefined
                    }
                })
            },
            handleDelete(row) {
                this.$confirm('此操作不可恢复，是否继续删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(async() => {
                    const { code, data } = await rechargeRewardDel({
                        id: row.id,
                        type: 2,
                        is_next: this.listQuery.is_next
                    })
                if (code === 200) {
        
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    this.initData()
                }
                
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
                })
            },
            onSubmit() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        // for (let key in this.formData) {
                        //     this.formData[key] = !this.formData[key] ? undefined : this.formData[key]
                        // }
                        // this.formData.public_screen_id,
                        this.formData.product_ids = [this.formData.seat_color_id,this.formData.acoustic_wave_id,this.formData.car_id].filter(element => element)
                        this.formData.product_ids = this.formData.product_ids.toString()
                        this.formData.privilege_ids = this.formData.privilege_ids.toString()
                        royalLevelSave(this.formData).then(res => {
                            if (res.code === 200) {
                                this.$message({
                                    type: 'success',
                                    message: '操作成功'
                                })
                                this.addDialog2 = false
                                this.formData.product_ids = []
                                this.formData.privilege_ids = []
                                this.initData()
                            }
                        })
            
                    }
                })
            },
            closeAddDialog() {
                this.user_code = undefined
            },
            closeAddDialog2() {
                if (this.$refs['form']) {
                    this.$refs['form'].clearValidate() // 清除整个表单的校验
                    this.$refs['form'].resetFields() // 清除整个表单的校验
                }
                this.formData = {
                    id: undefined,
                    name: undefined,
                    icon: undefined,
                    special: undefined, //效果图
                    numnameplateber: undefined, //专属铭牌
                    homepage_icon: undefined, //专属主页飘
                    homepage_special: undefined, //专属主页飘效果图
                    expired_day: undefined, //有效天数
                    upgrade_type: 0, //升级方式 0:累计消费 1:累计充值
                    upgrade_need_day: 7, //升级条件天数
                    upgrade_need_coin: undefined, //升级条件M豆
                    upgrade_expired_day: undefined, //升级有效期
                    keep_type: 0, //保级方式有效期内:0累计消费 1:累计充值
                    keep_need_coin: undefined, //有效期内M豆
                    sort: undefined, //
                    product_ids: [], //product_ids
                    privilege_ids: [], //特权ids
                    seat_color_id: undefined,
                    acoustic_wave_id: undefined,
                    public_screen_id: undefined,
                    car_id: undefined
                }
            },
            handleInput1(val) {
                if(val < 1) {
                    this.formData.expired_day = undefined
                }
                this.formData.expired_day = val.replace(/\D/g,'')
                // if(val.includes('.')) {
                //     this.formData.expired_day = val.replace('-', '')
                // }
            },
            handleInput3(val) {
                console.log(val)
                if(val < 1) {
                    
                    this.formData.keep_need_coin = undefined
                }
                this.formData.keep_need_coin = val.replace(/\D/g,'')
                // if(val.includes('.')) {
                //     this.formData.keep_need_coin = val.replace('-', '')
                // }
            },
            handleInput2(val) {
                if(val < 1) {
                    this.formData.sort = undefined
                }
                this.formData.sort = val.replace(/\D/g,'')
                // if(val.includes('.')) {
                // }
            },
            handleInput4(val) {
                
                if(val < 1) {
                    this.expired_day = undefined
                }
                this.expired_day = val.replace(/\D\./g,'')
                
            },
            handleInput5(val) {
                console.log(val)
                if(val < 1) {
                    
                    this.formData.upgrade_need_coin = undefined
                }
                this.formData.upgrade_need_coin = val.replace(/\D/g,'')
            },
            handlePictureSuccess1() {
                this.formData.icon = this.ossLastImgUrl
            },
            handlePictureRemove1() {
                this.formData.icon = undefined
            },
            handlePictureSuccess2() {
                this.formData.special = this.ossLastImgUrl
            },
            handlePictureRemove2() {
                this.formData.special = undefined
            },
            handlePictureSuccess3() {
                this.formData.nameplate = this.ossLastImgUrl
            },
            handlePictureRemove3() {
                this.formData.nameplate = undefined
            },
            handlePictureSuccess4() {
                this.formData.homepage_icon = this.ossLastImgUrl
            },
            handlePictureRemove4() {
                this.formData.homepage_icon = undefined
            },
            handlePictureSuccess5() {
                this.formData.homepage_special = this.ossLastImgUrl
            },
            handlePictureRemove5() {
                this.formData.homepage_special = undefined
            },
        }
    }
</script>
  
<style scoped lang="scss">
::v-deep {
    .checkedBox {
        
        .el-input {
            width: 250px !important;
        }
    }
}
.checkedBox {
    display: flex;
    align-items: center;
    
    span {
        width: 100px;
    }
}
.imageStyle {
    width: 250px;
}

.input {
    width: 200px;
}
.awardBox {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    .awardInfo {
        border-radius: 4px;
        position: relative;
        overflow: hidden;
        width: 148px;
        height: 148px;
        border: 1px solid #c0ccda;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;

        .closeIcon {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 10px;
            background: rgba(0,0,0,.6);
            color: #ffffff;
            overflow: hidden;
            cursor: pointer;
            font-size: 18px;
            opacity: 0;
            z-index: 0;
        }
    }
    .hide_box:hover {
        .closeIcon {
            opacity: 1;
            z-index: 1;
        }
    }
    .show_box {
        .closeIcon {
            opacity: 0;
            z-index: -1;
        }
    }
}
// .formWidth {
//     width: 45%;
//     display: inline-block;
// }
.privilege {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.leftText {
    width: 100px
}
.el-input {
    width: 250px;
}
</style>
  